<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Moshi TV - API Youtube</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <link rel='StyleSheet' href='css/youtube.css' type='text/css'>

        <script src='js/jquery-1.7.2.min.js'></script>
        <script src='js/jquery.xdr-transport.js'></script>
        <script src='js/swfobject.js'></script>

        <script>
            /* provide here the id of the video */
            var identifier = 'qrrosELRyss';

            var params = {allowScriptAccess: 'always'};
            var atts = {id: 'video'};
            swfobject.embedSWF('http://www.youtube.com/v/' + identifier + '?enablejsapi=1&playerapiid=ytplayer', 'ytapiplayer', '640', '360', '8', null, null, params, atts);

            function onYouTubePlayerReady(playerId) {
                ytplayer = document.getElementById('video');

                $('#data a').bind('click', function(e){
                    e.preventDefault();
                    var originalUrl = $(this).attr('href');
                    var url = originalUrl.split('=')[1];
                    ytplayer.loadVideoByUrl('http://www.youtube.com/v/' + url + '?version=3');
                });
            };
            
            function collectData() {
                $.ajax({
                    url: 'http://gdata.youtube.com/feeds/api/videos/' + identifier + '/related?max-results=5&alt=json',
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                        var video = data.feed.entry;
                        $(video).each (function(index){
                            var source = data.feed.entry[index].link[0]['href'];
                            var thumb = data.feed.entry[index].media$group.media$thumbnail[1]['url'];
                            var title = data.feed.entry[index].title['$t'];
                            var duration = data.feed.entry[index].media$group.yt$duration['seconds'];
                            var viewCount = data.feed.entry[index].yt$statistics['viewCount'];

                            $('#data').append('<li><a href="' + source + '"><img src="' + thumb + '"/></a><div class="text"><h2>' + title + '</h2><h3>' + viewCount + ' views</h3><h4>' + duration + '</h4></li>');
                    
                        });
                    }
                });
            }
            $(document).ready(function () {
                collectData();
            });
        </script>

        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>

        <div id="wrapper">

            <a id="moshi" href="http://www.moshitv.com/">moshi tv</a>

            <h1>Big Bad Bill (is a woolly blue hoodoo)</h1>

            <section>

                <div id="videoPlayer">
                    <div id="ytapiplayer">
                        <p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
                    </div><!-- #ytapiplayer -->
                </div><!-- #videoplayer -->

                <div class="comments">
                    <p>Commodo non. Donec velit sem, dignissim vel ultrices sed, aliquet nec sem. Nunc lorem orci, sollicitudin vitae faucibus in, rutrum porttitor dolor. Vivamus tincidunt faucibus tortor in varius. Donec vel felis massa.</p>
                    <p class="author">Posted on Monday November 11th, 2011 <span>by Moshi TV</span></p>
                </div><!-- .comments -->
            </section>

            <aside>
                <h1>More Videos</h1>
                <ul id="data"></ul><!-- #data -->
            </aside>

        </div><!-- #wrapper -->
    </body>
</html>